Skip to content

Chromium partially supports {align,justify,place}-self with absolute positioning#29342

Open
captainbrosset wants to merge 7 commits into
mdn:mainfrom
captainbrosset:place-self-abspos
Open

Chromium partially supports {align,justify,place}-self with absolute positioning#29342
captainbrosset wants to merge 7 commits into
mdn:mainfrom
captainbrosset:place-self-abspos

Conversation

@captainbrosset

@captainbrosset captainbrosset commented Mar 25, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds partial implementation flags and notes for align-self, justify-self, and place-self for all browsers, when they apply to absolutely positioned elements.

I tested this in Safari, Firefox, and Chrome, and discussed with Mozilla engineers @dshin-moz and @emilio.
My understanding is that there's a missing piece in all browsers where you can't just apply the above properties and expect them to work on their own. They also require a non-auto inset value.

Test results and supporting details

Test case: https://bug2026174.bmoattachments.org/attachment.cgi?id=9557965

image

The red box should be centered in the gray box.

Code:

<!DOCTYPE html>
<style>
  .parent { position: absolute; inset: 20vmin; background: gray; }
  .child { position: absolute; width: 50%; aspect-ratio: 1; background: red; justify-self: center; }
</style>
<div class="parent">
  <div class="child"></div>
</div>

Adding inset:0; on the child element makes it work.

I'm not entirely sure I'm reading the spec correctly though, and the placement of auto-inset abspos elements may actually be correct. But, WPT seems to show browser differences in this area at least: https://wpt.fyi/results/css/css-align/abspos/align-self-static-position-001.html?label=experimental&label=master&aligned

Related issues

@github-actions github-actions Bot added data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS size:m [PR only] 25-100 LoC changed labels Mar 25, 2026
@github-actions

github-actions Bot commented Mar 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Tip: Review these changes grouped by change (recommended for most PRs), or grouped by feature (for large PRs).

ddbeck
ddbeck requested changes Mar 27, 2026
View reviewed changes

@ddbeck ddbeck left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a weird case when it comes to partial_implementation. Our guidelines don't require us to set it. But there are multiple vendor bugs, so maybe it's still partial anyway.

I'm left wondering: if everyone agrees this is buggy behavior, why did everyone implement it the same way? 🤔

Comment thread css/properties/align-self.json Outdated
@captainbrosset

captainbrosset commented Mar 30, 2026

Copy link
Copy Markdown
Contributor Author

@fantasai is this something you can help us on?

@caugner

This comment was marked as outdated.

Sign in to view
caugner and others added 2 commits May 22, 2026 13:23
@caugner

caugner commented May 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

I have applied Daniel's suggestion now, which makes sense to me.

@captainbrosset Should we go ahead and merge, even if we haven't heard back from @fantasai?

Edit: I realize I had a typo in my previous message.

@caugner caugner changed the title Add partial implementation notes for align-self, justify-self, and place-self properties on absolute positioned elements Chromium partially supports {align,justify,place}-self with absolute positioning May 22, 2026
ddbeck
ddbeck requested changes May 26, 2026
View reviewed changes
Comment thread css/properties/align-self.json Outdated
captainbrosset
captainbrosset commented May 26, 2026
View reviewed changes
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/justify-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/justify-self.json Outdated
@captainbrosset
Apply suggestions from code review
7a46c64 
Co-authored-by: Patrick Brosset <patrickbrosset@gmail.com>
@captainbrosset captainbrosset requested a review from ddbeck May 26, 2026 09:41
yisibl
yisibl reviewed Jun 4, 2026
View reviewed changes
Comment thread css/properties/align-self.json
"version_added": "122"
"version_added": "122",
"partial_implementation": true,
"notes": "`align-self` only applies to absolutely positioned boxes when both insets on the appropriate axis are 0, for example `top` and `bottom`. See [bug 376097648](https://crbug.com/376097648)"

@yisibl yisibl Jun 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it’s important to clarify that this bug only occurs when the parent element is a block; there are no issues with flex or grid.

yisibl
yisibl reviewed Jun 4, 2026
View reviewed changes
Comment thread css/properties/justify-self.json
"version_added": "122"
"version_added": "122",
"partial_implementation": true,
"notes": "`justify-self` only applies to absolutely positioned boxes when both insets on the appropriate axis are 0, for example `left` and `right`. See [bug 376097648](https://crbug.com/376097648)"

@yisibl yisibl Jun 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This appears to have been fixed in this CL (Chrome 137); please verify it again.
https://chromiumdash.appspot.com/commit/a82a54d387f4bc1c3c1c08eeda15e86a7ef4f792

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ddbeck ddbeck Awaiting requested review from ddbeck

1 more reviewer

@yisibl yisibl yisibl left review comments

Reviewers whose approvals may not affect merge requirements

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS size:m [PR only] 25-100 LoC changed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@captainbrosset @caugner @ddbeck @yisibl